<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>dom-offset Test</title>
<style>
    html, body {
        margin: 0;
        padding: 0;
        border: none;
    }
</style>
</head>
<body>

<button class="test3">
    click to see container
</button>

<button class="test4">
    click to see container (top == false)
</button>

<button class="test5">
    click to see container's el natively
</button>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<button class="test1">
    click to see elem in container
</button>
<button class="test2">
    click to see elem in container (top == false)
</button>
<button class="test3">
    click to see container
</button>
<div style="width:200px;height:200px;overflow:auto;border: 5px solid #ccc;" id="container">
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <div id="el" style="border:5px solid #9f9;">
        test
    </div>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
    <p>x</p>
</div>
<button class="test1">
    click to see elem in container
</button>
<button class="test2">
    click to see elem in container (top == false)
</button>
<button class="test4">
    click to see container (top == false)
</button>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<iframe src="test-dom-offset-iframe.html"
        id="test-iframe"
        style="border:1px solid black; "
        width="200"
        height="200"
        frameborder="0"
        scrolling="no"
        ></iframe>
<button class="test6">
    click to see elem in iframe
</button>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<button class="test3">
    click to see container
</button>

<button class="test4">
    click to see container (top == false)
</button>

<script src="../../build/kissy/kissy-pkg.js"></script>
<script src="../../build/ua/ua-pkg.js"></script>
<script src="../../build/event/event-pkg.js"></script>

<script src="dom.js"></script>
<script src="selector.js"></script>
<script src="dom-class.js"></script>
<script src="dom-attr.js"></script>
<script src="dom-style.js"></script>
<script src="dom-style-ie.js"></script>
<script src="dom-offset.js"></script>

<script src="../../build/node/node-pkg.js"></script>

<script>
    KISSY.ready(function(S) {
        var test1 = S.all('.test1'),
                test2 = S.all('.test2'),
                test3 = S.all('.test3'),
                test4 = S.all('.test4'),
                test5 = S.all('.test5'),
                test6 = S.all('.test6'),
                container = S.one('#container'),
                node = S.one('#el');

        // see elem in container
        test1.on('click', function() {
            node.scrollIntoView(container);
        });
        test5.on('click', function() {
            node.scrollIntoView();
        });
        test6.on('click', function() {
            var iframe = S.get('#test-iframe'),
                inner = S.get('#test-inner', iframe.contentDocument);

            S.DOM.scrollIntoView(inner, iframe.contentWindow);
        });

        // see elem in container (top == false)
        test2.on('click', function() {
            node.scrollIntoView(container, false);
        });

        // see container
        test3.on('click', function() {
            container.scrollIntoView();
        });

        // see container (top == false)
        test4.on('click', function() {
            container.scrollIntoView(window, false);
        });

    });
</script>
</body>
</html>